<template>
  <div class="container" ref="wrap">
    <div class="content">
      <div class="box">
        <el-form :rules="rules" ref="form" :model="form">
          <el-form-item prop="phoneNumber">
            <el-input
              class="phoneInput"
              v-model="form.phoneNumber"
              placeholder="请输入手机号码"
              :validate-event="false"
              pattern="\d*" type='tel'
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form :rules="rules" ref="check" :model="form">
          <el-form-item prop="checkNumber">
            <div class="check">
              <el-input
                class="checkInput"
                v-model="form.checkNumber"
                placeholder="请输入验证码"
                :validate-event="false"
                pattern="\d*" type='tel'
              ></el-input>
              <button class="require" v-show="!show" @click="getVerification">
                获取验证码
              </button>
              <div class="countdown require" v-show="show">
                {{ count }} &nbsp;&nbsp; 秒
              </div>
            </div>
          </el-form-item>
        </el-form>

        <button class="lingqu" @click="checkInfo">立即领取</button>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "@better-scroll/core";
export default {
  name: "phoneContent",
  data() {
    return {
      count: 59,
      show: false,
      form: {
        phoneNumber: "",
        checkNumber: "",
      },

      isCheckedOk: true,
      verification: "",
      timer: "",

      rules: {
        phoneNumber: [
          // [{ required: true, validator: this.validateRate }],
          { required: true, validator: this.checkMobile },
        ],
        checkNumber: [
          {required: true, validator: this.validateNum}
        ]
      },
    };
  },
  mounted() {
    let bs = new BScroll(this.$refs.wrap, {
      movable: true,
      zoom: true,
      click: true,
      bounce: {
        top: true,
        bottom: true,
      },
    });
  },
  methods: {
    //手机号验证函数
    checkMobile(rule, value, callback) {
      // 验证手机号的正则表达式

      const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!value) {
        console.log("phoneCheck");
        return callback(new Error("手机号不能为空！"));
      }
      if (regMobile.test(value)) {
        // 合法的手机号
        callback();
      }
      // 不合法
      return callback(new Error("请输入合法的手机号！"));
    },
    //点击获取验证码函数
    getVerification() {
      //出发手机号验证
      console.log("clicked");
      this.$refs.form.validate((valid) => {
        if (valid) {
          //验证通过
          if (!this.timer) {
            this.count = 59;
            this.show = true;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= 59) {
                this.count--;
              } else {
                this.show = false;
                clearInterval(this.timer);
                this.timer = null
              }
            }, 1000);
            setTimeout(() => {
              for (let i = 0; i < 6; i++) {
                this.verification = Math.floor(Math.random() * 1000000)
                  .toString()
                  .padStart(6, "0");
              }
              console.log("已生成验证码" + this.verification);
            });
          }
        }
      });
    },

    //验证码核对
    validateNum(rule, value, callback) {
      if(!value) {
        return callback(new Error("请输入验证码！"))
      }
      if(value == this.verification) {
        alert("验证成功！")
        callback()
      }else{
        this.form.phoneNumber = '';
        this.form.checkNumber = '';
        this.varification = '';
        if(this.timer) {
          clearInterval(this.timer);
          this.timer = null
        }
        this.show = false
        return callback(new Error('验证失败！'))
      }
    },

    //点击按钮事件
    checkInfo() {
      this.$refs.check.validate((valid) => {
        if(valid) {
          console.log("领取消费券");
        }
      })
    }
  },
};
</script>
<style lang="stylus">
.el-form-item
  margin-bottom 0
.el-form-item__error
  margin-top -0.4rem
  position absolute
  top 50%
  right 0
  text-align center
.el-input__inner
  height 100%
  border-radius inherit
  // border-top-right-radius 0
  // border-bottom-right-radius 0
</style>
<style lang="stylus" scoped>
.container
  position fixed
  top 2.6rem
  left 0
  right 0
  bottom 0
  overflow hidden
  .content
    position relative
    width 100%
    height 37rem
    background-image url('~assets/phone/images/back_02.jpg')
    background-size 100% 100%
    .box
      position relative
      top 14.6rem
      left 50%
      margin-left -5.3rem
      display flex
      flex-direction column
      align-items center
      justify-content space-between
      width 11.6rem
      height 6.6rem
      .phoneInput
        height 1.8rem
        width 11.6rem
        border-radius 0.2rem
      .check
        display flex
        width 11.6rem
        height 1.8rem
        .checkInput
          border-top-left-radius 0.2rem
          border-bottom-left-radius 0.2rem
        .require
          min-width 3.6rem
          height 1.8rem
          line-height 1.8rem
          font-weight bold
          background-color #ffcccb
          border 0.01rem solid #ffcccb
          color #ff4255
          border-top-right-radius 0.1rem
          border-bottom-right-radius 0.1rem
          outline none
        .countdown
          background-color #bbbccc
      .lingqu
        width 100%
        height 2.2rem
        border none
        background-color transparent
        background-image url('~assets/phone/images/button.png')
        background-size 100% 100%
        color #ff716f
        line-height 2.2rem
        font-weight bolder
        font-size 0.8rem
</style>